<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" :size="formSize"
            status-icon>
            <!-- <el-form-item label="用户">
                <div v-if="ruleForm.user">
                    <el-button type="primary" @click="ruleForm.user = ''"
                        style="display: flex;align-items: center;justify-content: space-around;padding: 5px 10px;">
                        用户
                        <el-icon>
                            <Close />
                        </el-icon>
                    </el-button>
                </div>
                <el-button v-else type="primary" @click="selectUser">选择用户</el-button>
            </el-form-item> -->
            <el-form-item label="姓名">
                <el-input v-model="ruleForm.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="ruleForm.contact" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="店员身份">
                <el-radio-group v-model="ruleForm.shopIdentity" class="ml-4">
                    <el-radio label="0" size="large">店员</el-radio>
                    <el-radio label="1" size="large">管理员</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="所属门店" v-if="ruleForm.shopIdentity == '0'">
                <div>
                    <el-select v-model="ruleForm.belongingStore" placeholder="请选择">
                        <el-option :label="item.name" :value="item.id" v-for="(item, index) in belongingStoreList"
                            :key="index" />
                    </el-select>
                    <p style="margin: 0;">管理员不隶属于某个门店</p>
                </div>
            </el-form-item>
            <!-- <el-form-item label="权限">
                <el-checkbox-group v-model="ruleForm.permission2">
                    <el-checkbox label="订单核销" name="type" />
                    <el-checkbox label="查看交易数据" name="type" />
                    <el-checkbox label="消息通知" name="type" />
                    <el-checkbox label="店员管理" name="type" v-if="ruleForm.shopIdentity == '1'" />
                    <el-checkbox label="预约管理" name="type" />
                    <el-checkbox label="上传商品" name="type" v-if="ruleForm.shopIdentity == '1'" />
                    <el-checkbox label="申请直播" name="type" v-if="ruleForm.shopIdentity == '1'" />
                    <el-checkbox label="物流发货" name="type" />
                    <el-checkbox label="核销记录" name="type" />
                    <el-checkbox label="自提记录" name="type" />
                    <el-checkbox label="卡包记录" name="type" />
                    <el-checkbox label="订单管理" name="type" />
                    <el-checkbox label="门店结算数据" name="type" />
                    <el-checkbox label="同城配送" name="type" />
                    <el-checkbox label="业务合作" name="type" />
                </el-checkbox-group>
            </el-form-item> -->
            <el-form-item label="状态">
                <el-radio-group v-model="ruleForm.status" class="ml-4">
                    <el-radio label="0" size="large">开启</el-radio>
                    <el-radio label="1" size="large">关闭</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="店员核销密码" v-if="ruleForm.shopIdentity == '0'">
                <div>
                    <el-input v-model="ruleForm.shopAssverPassword" type="password" placeholder="请输入" show-password
                        maxlength="4" show-word-limit />
                    <p style="margin: 0;">用于用户自助核销，密码为4位</p>
                </div>
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
                <el-button @click="closeAdd()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-dialog v-model="isSelectUser" title="用户选择" width="800px" :before-close="handleClose">
        <div v-if="isSelectUser">
            <el-card class="box-card">
                <el-form :inline="true" :model="page" class="demo-form-inline">
                    <el-form-item label="用户">
                        <el-input v-model="page.name" placeholder="请输入昵称" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">搜索</el-button>
                        <el-button type="primary" @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="tableData" style="width: 100%" max-height="600px"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" />
                    <el-table-column prop="userName" label="用户" align="center">
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号" align="center">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center">
                    </el-table-column>
                </el-table>
                <Pagination v-if="total != 0" :page="page" :total="total" @pageSizeChanged="handlePageSizeChange"
                    @currentPageChanged="handleCurrentPageChange" />
            </el-card>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="isSelectUser = false">取消</el-button>
                <el-button type="primary" @click="okUserData">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import axios from 'axios'
import { onMounted, reactive, ref } from 'vue'
import { deletePhoto, addMerchantCategory, updateMerchantCategory } from '@/api/merchant.js'
import { selectBelongingStore, addEmployee, updateEmployee } from '@/api/merchantManagement.js'
import { ElMessage } from 'element-plus'
import Pagination from '@/components/pagination/index.vue' // 引入分页组件
import { userList } from '@/api/userManagement.js'
import { useRoute } from 'vue-router';
const route = useRoute();


const emit = defineEmits(['closeAdd', 'closeOK'])
const isSelectUser = ref(false)
const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
    name: '',  // 姓名
    contact: '',    // 联系方式
    shopIdentity: '0',  // 店员身份
    belongingStore: '',  // 所属门店
    permission2: [],  // 权限
    status: '0',    // 状态
    // shopAssverPassword: '',  // 店员核销密码
    // user: '',    // 用户ID
    storeId: '',    // 用户ID
})
const belongingStoreList = ref([])


const props = defineProps({
    isAdd: {
        type: Boolean,
        default: true, // 默认值为 true
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})

onMounted(() => {
    if (!props.isAdd) {
        ruleForm.name = props.row.name; // 初始化表单字段值
        ruleForm.contact = props.row.contact; // 初始化表单字段值
        ruleForm.shopIdentity = props.row.shopIdentity; // 初始化表单字段值
        ruleForm.belongingStore = props.row.belongingStore; // 初始化表单字段值
        // ruleForm.permission2 = props.row.permission.split(','); // 初始化表单字段值
        ruleForm.status = props.row.status; // 初始化表单字段值
        // ruleForm.shopAssverPassword = props.row.shopAssverPassword; // 初始化表单字段值
        // ruleForm.user = props.row.user; // 初始化表单字段值
    }
    ruleForm.storeId = route.query.storeId; // 初始化表单字段值
    getList()
    getData()
})

const getData = () => {
    let par = {
        id: route.query.id,
        type: route.query.type,
    }
    selectBelongingStore(par).then(res => {
        if (res.code == 200) {
            belongingStoreList.value = res.data
        }
    })
}

// 表格确认
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.isAdd) {
                addEmployee(ruleForm).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        emit('closeOK')
                    }
                })

            } else {
                updateEmployee({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 关闭
const closeAdd = () => {
    emit('closeAdd')
}


const page = reactive({
    name: "",
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)
const tableData = reactive([])
const multipleSelection = ref([])
// 多选
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
// 搜索
const onSubmit = () => {
    getList()
}
// 重置
const reset = () => {
    page.name = "";
    page.pageNum = 1;
    page.pageSize = 10;
    getList()
}
// 分页
const handlePageSizeChange = (val) => {
    page.pageNum = 1
    page.pageSize = val
    getList()
}

const handleCurrentPageChange = (val) => {
    page.pageNum = val
    // page.pageSize = 10
    getList()
}
// 选择用户
const selectUser = () => {
    isSelectUser.value = true
}
// 关闭弹框
const handleClose = () => {
    isSelectUser.value = false
}
// 获取列表
const getList = () => {
    tableData.length = 0
    total.value = 0
    userList(page).then(res => {
        if (res.code == 200) {
            tableData.push(...res.data.records)
            total.value = res.data.total
        }
    })
}
// 弹框确认
const okUserData = () => {
    ruleForm.user = multipleSelection.value[0].id;
    isSelectUser.value = false
}
</script>

<style lang="scss" scoped>
.avatar {
    width: 100%;
    height: 100%;
}

::v-deep .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

::v-deep .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

::v-deep.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

::v-deep .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>